<template>
  <div id="aside">
    <!-- 搜索框 -->
    <my-search></my-search>

    <!-- 名片 -->
    <!-- <my-info></my-info> -->

    <!-- 公告 -->
    <!-- <my-notice></my-notice> -->

    <!-- 排名 -->
    <my-rank></my-rank>

    <!-- 置顶 -->
    <my-top></my-top>

    <!-- 推荐 -->
    <my-recommend></my-recommend>

    <!-- 大赏 -->
    <my-reward></my-reward>

    <!-- 时间线 -->
    <my-timeline></my-timeline>

    <!-- 友情链接 -->
    <my-link></my-link>

    <!-- 咨询 -->
    <el-button @click="drawer = true" class="thumb" size="medium">
      <i class="el-icon-phone"></i>
    </el-button>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <el-card>
        <span>技术交流、友链申请、留言：
          <br /> QQ：603085899
          <br /> Email：603085899@qq.com
        </span>
      </el-card>
    </el-drawer>

    <!-- 刷新 -->
    <el-button class="thumb-refresh" @click="refresh">
      <i class="el-icon-refresh"></i>
    </el-button>

    <!-- 回到顶部 -->
    <template>
      <el-backtop :bottom="360" :right="10" :visibility-height="200">
        <el-button class="to-top">
          <i class="el-icon-thumb"></i>
        </el-button>
      </el-backtop>
    </template>

  </div>
</template>

<script>
import Info from '@/components/Info.vue'
import Link from '@/components/Link.vue'
import Reward from '@/components/Reward.vue'
import Rank from '@/components/Rank.vue'
import Top from '@/components/Top.vue'
import Recommend from '@/components/Recommend.vue'
import Timeline from '@/components/Timeline.vue'
import Search from '@/components/Search.vue'
import Notice from '@/components/Notice.vue'

export default {
    components: {
        'my-info': Info,
        'my-link': Link,
        'my-reward': Reward,
        'my-rank': Rank,
        'my-top': Top,
        'my-recommend': Recommend,
        'my-timeline': Timeline,
        'my-search': Search,
        'my-notice': Notice
    },
    name: 'my-aside',
    data () {
        return {
            drawer: false,
            keyword: '',
            links: []
        }
    },
    methods: {
        refresh () {
            location.reload()
        }
    },
    mounted () {

    }
}
</script>

<style scoped>
#aside {
  height: auto;
  background-color: beige;
}

.thumb {
  position: fixed;
  right: 2px;
  bottom: 400px;
}

.thumb-refresh {
  position: fixed;
  right: 2px;
  bottom: 437px;
}
</style>
